<template>
  <div id="videolist" class="page-full-screen">
    <div>
      <!--<el-button @click="addTit('新增')">新增</el-button>-->
      <el-button @click="addTit('审核失败')">审核失败</el-button>
      <el-button @click="addTit('审核通过')">审核通过</el-button>
      <!--<el-button @click="addTit('设置大咖')">设置大咖</el-button>-->
      <!--<el-button @click="addTit('设置用户组')">设置用户组</el-button>-->
      <el-button @click="searchshow = !searchshow">搜索&nbsp;<i :class="{active: searchshow === true}" class="iconfont icon-zhankai" style="font-size: 12px" />
      </el-button>
    </div>
    <el-collapse-transition>
      <div v-show="searchshow">
        <div class="main-box">
          <span>商品名</span>
          <el-input
            v-model="searchmsg.title"
            placeholder="请输入商品名"
            size="mini"
            prefix-icon="el-icon-search" />
        </div>
        <div class="main-box">
          <span>审核状态</span>
          <el-radio-group v-model="searchmsg.verifyStatus">
            <el-radio label="">全部</el-radio>
            <el-radio label="10">审核通过</el-radio>
            <el-radio label="1">审核失败</el-radio>
            <el-radio label="0">未审核</el-radio>
          </el-radio-group>
        </div>
        <div class="main-box">
          <span>入驻企业</span>
          <el-select
            v-model="searchmsg.companyId"
            :remote-method="loadTypes"
            :loading="searchCompany.loading"
            filterable
            remote
            size="mini"
            placeholder="请输入企业名">
            <el-option
              v-for="item in searchCompany.list"
              :key="item.id"
              :label="item.title"
              :value="item.id" />
          </el-select>
          <span style="margin-left: 20px"><el-button size="mini" @click="search">确定</el-button></span>
        </div>
      </div>
    </el-collapse-transition>
    <msg-list
      :table-data="tableData"
      :title="title"
      :btntype="btntype"
      :pagesall="parseInt(pagesall)"
      :pages="parseInt(page)"
      @getselect="getselect"
      @changepage="changepage1"
      @getid="getid1" />
    <div v-show="seecontent" class="layer">
      <div class="mask" @click="seecontent = false" />
      <div class="content">
        <span class="close" @click="seecontent = false"><i class="iconfont icon-untitled94" /></span>
        <p class="title">审核</p>
        <div class="main-box" style="text-align: center">
          <span style="margin-left: 50px;"><el-button @click="addTags('pass')">通过</el-button></span>
          <span style="margin-left: 50px;"><el-button @click="addTags('reject')">拒绝</el-button></span>
        </div>
      </div>
    </div>
    <el-dialog
      :visible.sync="centerDialogVisible1"
      title="商品详情"
      width="50%"
      center>
      <div class="userinfo-class">
        <div class="item">
          <span class="title">商品图片：</span>
          <el-image
            :src="userInfo.pic"
            style="width: 100px; vertical-align: top; "
            fit="fill" />
        </div>
        <div class="item">
          <span class="title">商品名：</span>{{ userInfo.title }}
        </div>
        <div class="item"><span class="title">副标题：</span>{{ userInfo.sub_title }}</div>
        <div class="item"><span class="title">详情页标题：</span>{{ userInfo.detail_title }}</div>
        <div class="item"><span class="title">详情页描述：</span>{{ userInfo.detail_desc }}</div>
        <div class="item"><span class="title">价格：</span>{{ userInfo.price }}</div>
        <div class="item"><span class="title">是否进口：</span>{{ userInfo.is_import }}</div>
        <div class="item"><span class="title">货号：</span>{{ userInfo.sn }}</div>
        <div class="item"><span class="title">库存：</span>{{ userInfo.stock }}</div>
        <div class="item"><span class="title">商品单位：</span>{{ userInfo.unit }}</div>
        <div class="item"><span class="title">重量：</span>{{ userInfo.weight }}</div>
        <div class="item"><span class="title">生产日期：</span>{{ userInfo.exp }}</div>
        <div class="item"><span class="title">标准号：</span>{{ userInfo.standard_no }}</div>
        <div class="item"><span class="title">是否上架：</span>{{ userInfo.is_publish }}</div>
        <div class="item"><span class="title">是否新品：</span>{{ userInfo.is_new }}</div>
        <div class="item"><span class="title">详情页详情：</span>
          <div style="flex:1;">
            <Content :content="userInfo.content" />
          </div>
        </div>
        <!--        <div class="item"><span class="title">审核状态：</span>{{ userInfo.verify_status }}</div>-->

      </div>

      <el-divider />

      <span slot="footer" class="dialog-footer">
        <el-button v-if="userInfo.verify_status===10" type="warning" @click="addTags('reject')">审核拒绝</el-button>
        <el-button v-if="userInfo.verify_status!==10" type="primary" @click="addTags('pass')">审核通过</el-button>
        <el-button @click="centerDialogVisible1 = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import msgbox from '../../common/msgbox.js'
import config from '../../common/config'
import MsgList from '../public/msgList'
import editor from '../../assets/editor/editor'
import ImgUpload from '../public/imgUpload'
import Content from '../../assets/editor/content'

export default {
  name: 'Index',
  components: {
    ImgUpload,
    MsgList,
    editor: editor, Content
  },
  data() {
    return {
      allCode: [],
      inputCode: [],
      centerDialogVisible1: false,
      centerDialogVisible: false,
      page: 1,
      addtitle: '新增',
      enabled: 1,
      addvideo: {
        title: '',
        intro: '',
        website: '',
        icon: '',
        deal_code: '',
        download_url: '',
        order_num: 0,
        enabled: 1,
        content: '',
        aro_id: ''
      },
      searchmsg: {
        companyId: '',
        title: '',
        verifyStatus: ''
      },
      btntype: ['审核', '查看详情'],
      pagesall: 0,
      content: {},
      type: true,
      deletes: {
        ids: [],
        reason: ''
      },
      delshow: false,
      searchshow: false,
      seecontent: false,
      title: [
        {
          prop: 'id',
          label: 'id'
        },
        {
          prop: 'companyTitle',
          label: '企业名'
        },
        {
          prop: 'title',
          label: '产品名'
        },
        {
          prop: 'brand',
          label: '品牌'
        },
        {
          prop: 'price',
          label: '价格'
        },
        {
          prop: 'sn',
          label: '产品货号'
        },
        {
          prop: 'stock',
          label: '产品库存'
        },
        {
          prop: 'exp',
          label: '生产日期'
        },
        {
          prop: 'standard_no',
          label: '标准号'
        },
        {
          prop: 'verify_status',
          label: '审核状态'
        }
      ],
      tableData: [],
      price: 0,
      intro: [],
      tid: 0,
      getmsg: {},
      videocateadd: [],
      userInfo: {
        info: {}
      },
      kaDiscount: '',
      activeName: '0',
      searchCompany: {
        list: [],
        loading: false
      }
    }
  },
  computed: {
    auditTitle() {
      return {
        0: '未提交',
        1: '审核中(打款申请中)',
        2: '审核中(打款金额待验证)',
        3: '审核中(待管理员审核)',
        9: '审核驳回',
        10: '审核通过'
      }
    }
  },
  mounted() {
    this.search()
  },
  methods: {
    search() { // 搜索获取数据
      const that = this
      this.$g.ajax({
        path: 'companies/getProductList',
        method: 'post',
        data: {
          companyId: this.searchmsg.companyId,
          title: this.searchmsg.title,
          verifyStatus: this.searchmsg.verifyStatus,
          page: this.page
        },
        cbSuccess: function(data) {
          that.tableData = data.memo.list
          if (data.memo.list.length > 0) {
            for (const i in data.memo.list) {
              if (data.memo.list[i].type === 0) {
                that.tableData[i].type = '图片展馆'
              }
              if (data.memo.list[i].type === 1) {
                that.tableData[i].type = 'VR展馆'
              }
              if (data.memo.list[i].verify_status === 0) {
                that.tableData[i].verify_status = '未审核'
              }
              if (data.memo.list[i].verify_status === 1) {
                that.tableData[i].verify_status = '审核失败'
              }
              if (data.memo.list[i].verify_status === 10) {
                that.tableData[i].verify_status = '审核通过'
              }
            }
          }
          that.pagesall = parseInt(data.memo.pageTotal)
          // that.types()
        },
        cbError: function(data) {
          const msg = msgbox.get(data.msg)
          that.$message.error(msg)
        }
      })
    },
    loadTypes(title) { // 获取分类数据
      if (title !== '') {
        this.searchCompany.loading = true
        const that = this
        this.$g.ajax({
          path: 'companies/searchCompany',
          method: 'post',
          data: {
            name: title
          },
          cbSuccess: function(data) {
            that.searchCompany.list = data.memo
          },
          cbError: function(data) {
            const msg = msgbox.get(data.msg)
            that.$message.error(msg)
          },
          cbFinally: function() {
            that.searchCompany.loading = false
          }
        })
      } else {
        this.searchCompany.list = []
      }
    },
    addTit(type) {
      const that = this
      if (type === '审核失败' || type === '审核通过') {
        let enabled = ''
        if (type === '审核失败') {
          enabled = 1
        }
        if (type === '审核通过') {
          enabled = 10
        }
        this.$g.ajax({
          path: 'companies/setProductVerify',
          method: 'post',
          data: {
            ids: this.deletes.ids,
            check: enabled
          },
          cbSuccess: function(data) {
            that.$message.success('操作成功')
            that.search()
          },
          cbError: function(data) {
            const msg = msgbox.get(data.msg)
            that.$message.error(msg)
          }
        })
      }
    },
    addTags(param) { // 添加/修改视频集
      const that = this
      this.$g.ajax({
        path: 'companies/setProductVerify',
        method: 'post',
        data: {
          ids: [that.tid],
          check: param === 'pass' ? 10 : 1
        },
        cbSuccess: function(data) {
          that.$message.success('保存成功')
          that.seecontent = false
          that.addvideo = {
            companyId: '',
            isResident: 0,
            startDate: '',
            endDate: '',
            img: '',
            intro: '',
            orderNum: 0,
            enabled: 1

          }
          that.setimg = ''
          that.search()
        },
        cbError: function(data) {
          const msg = msgbox.get(data.msg)
          that.$message.error(msg)
        }
      })
    },
    changepage1(page) { // 更改page
      this.page = page
      this.search()
    },
    delhot() {

    },
    getid1(val) { // 获取列表button信息
      const that = this
      if (val.btn === '删除') {
        this.tid = val.val.id
        this.delhot()
      }
      if (val.btn === '审核') {
        that.tid = val.val.id
        that.seecontent = true
        that.addtitle = '审核'
      }
      if (val.btn === '查看详情') {
        that.getmsg = val
        that.tid = val.val.id
        that.getUserinfo()
      }
    },
    getselect(vals) { // 获取多选id
      this.deletes.ids = []
      for (const i in vals) {
        this.deletes.ids.push(vals[i].id)
      }
    },
    getUserinfo() {
      const that = this
      this.$g.ajax({
        path: 'companies/productInfo',
        method: 'post',
        data: {
          id: that.tid
        },
        cbSuccess: function(data) {
          that.userInfo = data.memo
          that.userInfo.pic = data.memo.pic ? config.imgURI + data.memo.pic : null
          that.userInfo.is_import = data.memo.is_import === 0 ? '否' : '是'
          that.userInfo.is_new = data.memo.is_new === 0 ? '否' : '是'
          that.userInfo.is_publish = data.memo.is_publish === 0 ? '否' : '是'
          that.centerDialogVisible1 = true
        },
        cbError: function(data) {
          const msg = msgbox.get(data.msg)
          that.$message.error(msg)
        }
      })
    },
    changemsg() {
      this.addvideo = {
        user_id: this.getmsg.val.id,
        begin_time: this.getmsg.val.begin_time,
        end_time: this.getmsg.val.end_time,
        id_card: this.getmsg.val.id_card
      }
      if (this.getmsg.enabled === 0) {
        this.enabled = 0
      }
      if (this.getmsg.enabled === 1) {
        this.enabled = 1
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.userinfo-class {
  padding: 20px;
  //border-bottom: 1px solid #cccccc;
  //text-align: center;

  .img-title {
    position: relative;
    top: -18px;
  }

  .item {
    display: flex;
    padding: 5px 0;

    .title {
      vertical-align: top;
      display: inline-block;
      min-width: 200px;
      text-align: right;
    }
  }

  img {
    width: 50px;
    height: 50px;
  }
}

.active {
  display: inline-block;
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

#videolist {
  .main-box {
    margin-top: 20px;

    span {
      margin-right: 30px;
      font-size: 14px;
      font-weight: 700;
      color: #606266;
    }

    .el-input {
      width: 240px;
    }
  }

  .main-box {
    .el-radio__inner {
      background: red;
    }

    .el-radio__input.is-checked + .el-radio__label {
      color: #00a4a0 !important;
    }
  }

  .layer {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 999;
    overflow: hidden;

    .mask {
      background: rgba(153, 153, 153, 0.5);
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: 1;
    }

    .imgcontent {
      text-align: center;

      img {
        position: relative;
        max-width: 80%;
        max-height: 80%;
        background: #fff;
        margin: 5% auto;
        z-index: 3;
      }
    }

    .content {
      position: relative;
      width: 60%;
      max-height: 80%;
      background: #fff;
      margin: 5% auto;
      z-index: 2;
      padding: 30px;
      overflow: scroll;

      .close {
        position: absolute;
        right: 10px;
        top: 10px;
        cursor: pointer;
      }

      .inputcl {
        margin-top: 20px;

        .layer-list-title {
          display: inline-block;
          width: 80px;
          margin-left: 15px;
          margin-right: 10px;
          float: left;
          vertical-align: middle;
          line-height: 28px;
        }

        .img-list {
          vertical-align: top;
          float: left;
          line-height: 18px;
        }

        .imgupload {
          display: block;
          margin-left: 105px;
        }

        .imgupload1 {
          display: block;
          margin-left: 105px;
        }

        .main-cctv {
          min-height: 200px;
          border: 1px solid #cccccc;
        }

        .el-input {
          max-width: 200px;
        }

        img {
          width: 320px;
          height: 240px;
        }
      }

      .title {
        text-align: center;
        font-size: 18px;
        font-weight: bold;
      }

      .doit .one .el-input {
        width: 200px;
        margin-left: 20px;
      }

      .doit .one {
        margin-top: 20px;
        font-size: 14px;
      }

      .el-date-editor.el-input, .el-date-editor.el-input__inner {
        position: relative;
        left: -4px;
      }

      .buttons {
        margin-top: 20px;
        text-align: center;

        button {
          margin: 0 20px;
        }
      }
    }
  }
}

.code-ul {
  li {
    padding: 0 20px;
    margin-bottom: 10px;

    .el-input {
      max-width: 100% !important;
    }

    div:nth-of-type(1) {
      font-size: 14px;
      margin-bottom: 6px;
    }
  }
}

/deep/ .kk-editor .ql-container img {
  max-width: 100% !important;
}
</style>
<style>
.el-button:focus, .el-button:hover {
  color: #00a4a0;
}

.el-button:active {
  border-color: #00a0a0;
}

.el-button {
  padding: 8px 14px;
}

.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background: #00a4a0;
  border-color: #00a4a0;
}

.transition-box {
  margin-bottom: 10px;
  width: 200px;
  height: 100px;
  border-radius: 4px;
  background-color: #409EFF;
  text-align: center;
  color: #fff;
  padding: 40px 20px;
  box-sizing: border-box;
  margin-right: 20px;
}

#videolist .el-textarea__inner {
  resize: none;
}
</style>
